import React from 'react';
class App extends React.Component{
    
    state = {
        count:0
    }
    // click1-3 是定义在 App.prototype上的
    click1(){
        console.log('click1 this: ', this);
        this.setState({
            count: this.state.count + 1
        })
    }
    click2(){
        this.setState({
            count: this.state.count + 1
        })
        console.log('click2 this: ', this);
    }
    click3(){
        this.setState({
            count: this.state.count + 1
        })
        console.log('click3 this: ', this);
    }
    // click4 是定义在每一个App实例化出来的对象身上的
    click4 = ()=>{
        this.setState({
            count: this.state.count + 1
        })
        console.log('click4 this: ', this);
    }
    // 1. 存储空间
    // 2. 能不能传递参数

    // 推荐使用 包裹箭头函数 或 bind的方式
    
    render(){
        return <div>
            <h3>App</h3>
            <p>count: {this.state.count}</p>
            <p><button onClick={this.click1}>有问题的按钮</button></p>
            <p><button onClick={()=>this.click2()}>通过包裹箭头函数实现</button></p>
            <p><button onClick={this.click3.bind(this)}>通过bind实现</button></p>
            <p><button onClick={this.click4}>直接赋值箭头函数执行的</button></p>
        </div>
    }
}
export default App;

